/**
 * 二审资料详情
 */
import * as React from 'react'
import { Card, Form, Input, Button, message } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import ConstDes from './ConstDesContainer'
import '../../assets/style/detail.less'
import { post, EDIT_SECONINS_INFO } from '../../service/api'
const FormItem = Form.Item
export interface Props{
  sample: any
  sampleImgs: any
  workStatus: any []
  checkList: any []
  roleScore: any []
  sampleScore: any []
  history: any
}

export interface State {
  shVisible: boolean
  hxVisible: boolean
  ysVisible: boolean
  tab: string
}
const tabList = [
  {
    key: 'baseInfo',
    tab: '基础资料',
  },
  {
    key: 'costDes',
    tab: '成本分解',
  },
]
@Authentication
class SecondInstanceDetail extends React.Component<Props & FormComponentProps, State> {
  state = {
    shVisible: false,
    hxVisible: false,
    ysVisible: false,
    tab: tabList[0].key,
  }
  clickStep = (status: number) => {
    if (status == 2) {
      this.setState({
        ...this.state,
        shVisible: true
      })
    } else if(status == 5) {

    } else if(status == 9) {
      this.setState({
        ...this.state,
        ysVisible: true
      })
    }
  }
  onTabChange = (tab: string) => {
    this.setState({
      ...this.state,
      tab
    })
  }
  handleSave = (e: any) => {
    e.preventDefault()
    const { form } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      const { sample } = this.props
      let data = {
        ...sample,
        ...fieldsValue
      }
      post(EDIT_SECONINS_INFO, data).then((res: any) => {
        if (res.code == '1') {
          message.success('操作成功！')
        }else {
          message.error(res.errMsg)
        }
      })
    })
  }
  render () {
    const { sampleImgs, sample, form } = this.props
    const { tab } = this.state
    const { getFieldDecorator } = form
    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    }
    return (
      <PageHeaderLayout 
        title = ""
        tabList={tabList}
        onTabChange = {this.onTabChange}
        tabDefaultActiveKey = "baseInfo">
        {tab == "baseInfo"? (<div>
          <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
            <Description term="供应商名称">{sample.vendername}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="其他信息">
          <Form layout="horizontal" onSubmit={ this.handleSave }>
            <FormItem label="产地" {...formItemLayout}>
              {getFieldDecorator('place', { 
                rules: [{ required: true, message: '请选择风格' }],
                initialValue: sample.place
              })(
                <Input/>
              )}
            </FormItem>
            <FormItem label="安全类别" {...formItemLayout}>
              {getFieldDecorator('security', { 
                rules: [{ required: true, message: '请输入版型' }], 
                initialValue: sample.SECURITY
              })(
                <Input />
              )}
            </FormItem>
            <FormItem label="执行标准" {...formItemLayout}>
              {getFieldDecorator('execut', { 
                rules: [{ required: true, message: '请输入尺码' }], 
                initialValue: sample.execut
              })(
                <Input />
              )}
            </FormItem>
            <FormItem label="面料成分" {...formItemLayout}>
              {getFieldDecorator('fabric', { 
                rules: [{ required: true, message: '请输入占比' }],
                initialValue: sample.fabric
              })(
                <Input />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={()=>{this.props.history.goBack()}} >返回</Button>
            </FormItem>
          </Form>
        </Card></div>): 
        <ConstDes />}
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(SecondInstanceDetail)
